/**
 * base-tabs-nav.less - BaseTabNav 组件样式
 * =============================================================
 * Created By: Yaohaixiao
 * Update: 2022.11.09
 */
.base-tabs {
  &-nav {
    position: relative;
    z-index: 1;
    height: 40px;
    overflow: hidden;

    &::after {
      content: '';
      position: absolute;
      z-index: 1;
      left: 0;
      top: 39px;
      width: 100%;
      height: 0;
      border-bottom: 1px solid @primary_border_color;
      overflow: hidden;
    }

    &__prev,
    &__next,
    &__add {
      position: relative;
      z-index: 2;
      display: inline-block;
      margin: 0;
      width: 40px;
      height: 40px;
      color: @fourth_text_color;
      cursor: pointer;
      overflow: hidden;

      &:hover {
        color: @primary_color;
      }

      .ijs-icon {
        position: absolute;
        z-index: 2;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }

    &__prev,
    &__next {
      &.is-disabled {
        cursor: not-allowed;
        color: @primary_border_color;
      }
    }

    &__main {
      position: relative;
      z-index: 2;
      display: inline-block;
      margin: 0;
      height: 40px;
      overflow: hidden;

      &.is-max {
        width: calc(100% - 120px);
      }

      &.is-full {
        width: calc(100% - 80px);
      }

      .base-tabs-item {
        float: left;
        display: block;
        margin: 0;
      }
    }

    &_card {
      .base-tabs-item {
        border: 1px solid @primary_border_color;
        border-left: 0;
        border-bottom: 0;

        &:first-child {
          border-left: 1px solid @primary_border_color;
        }

        &.is-active {
          color: @primary_color;

          &::after {
            content: '';
            position: absolute;
            z-index: 1;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 0;
            border-bottom: 1px solid @white;
          }
        }

        &.is-disabled {
          color: @fourth_text_color;
          cursor: not-allowed;
          padding-right: 16px;

          &:hover {
            color: @fourth_text_color;
          }

          &.is-active {
            color: @fourth_text_color;
          }
        }
      }
    }

    &_border-card {
      border: 1px solid @primary_border_color;
      border-bottom: none;
      background-color: @primary_bg_color;

      .base-tabs-item {
        color: @fourth_text_color;
        border-left: 1px solid @primary_bg_color;
        border-right: 1px solid @primary_bg_color;

        &:hover {
          color: @primary_color;
        }

        &.is-active {
          color: @primary_color;
          border-left: 1px solid @primary_border_color;
          border-right: 1px solid @primary_border_color;
          background-color: @white;

          &::after {
            content: '';
            position: absolute;
            z-index: 1;
            left: 0;
            bottom: 1px;
            width: 100%;
            height: 0;
            border-bottom: 1px solid @white;
          }
        }

        &.is-disabled {
          color: @fourth_text_color;
          cursor: not-allowed;
          padding-right: 16px;

          &:hover {
            color: @fourth_text_color;
          }

          &.is-active {
            color: @fourth_text_color;
          }
        }

        &:first-child {
          margin-left: -1px;
        }
      }
    }
  }

  &__list {
    position: relative;
    z-index: 3;
    float: left;
    margin: 0;
    padding: 0;
    list-style-type: none;
    height: 40px;
    transition: all 0.4s ease-in-out;
    overflow: hidden;

    &.is-scrollable {
      position: absolute;
      float: none;
      top: 0;
      left: 0;
    }
  }
}
